<script src="https://fastly.jsdelivr.net/npm/three@0.145.0"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/loaders/GLTFLoader.js"></script>

<body></body>
<style>
    body {
        margin: 0;
    }
</style>
<script>
    setTimeout(function () {

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 10, 15);
        camera.lookAt(0, 0, 0);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xb9d3ff, 1);
        document.body.appendChild(renderer.domElement);

        new THREE.OrbitControls(camera, renderer.domElement);

        // 记录纹理
        var textures = {};
        var crtTexture = function (imgName) {
            var curTexture = textures[imgName];
            if (!curTexture) {
                curTexture = new THREE.TextureLoader().load('./data/MachineRoom/' + imgName);
                curTexture.flipY = false;
                curTexture.wrapS = 1000;
                curTexture.wrapT = 1000;
                textures[imgName] = curTexture;
            }
            return curTexture;
        };

        var gltfLoader = new THREE.GLTFLoader();
        gltfLoader.load("./data/MachineRoom/machineRoom.gltf", function (data) {

            // 修改使用的材质类型
            data.scene.children.forEach(function (obj) {
                if (obj.material.map) {
                    obj.material = new THREE.MeshBasicMaterial({
                        map: crtTexture(obj.material.map.name)
                    });
                } else {
                    obj.material = new THREE.MeshBasicMaterial({
                        color: obj.material.color
                    });
                }
            });

            scene.add(...data.scene.children);
        });

        (function display() {
            renderer.render(scene, camera);
            requestAnimationFrame(function () {
                display();
            });
        })();

    }, 200);

</script>